<script setup>
import { ref, computed } from 'vue'
import { useI18n } from 'vue-i18n'
import { nextTick, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { isLoggedIn, getUserInfo, logout } from '@/utils/auth'

const { t, locale } = useI18n()
const router = useRouter()
const showLanguagePopup = ref(false)
const showUserPopup = ref(false)

// 计算属性：判断用户是否已登录
const userLoggedIn = ref(isLoggedIn())

// 用户信息
const userInfo = ref(getUserInfo())

// 刷新登录状态
const refreshLoginStatus = () => {
  userLoggedIn.value = isLoggedIn()
  userInfo.value = getUserInfo()
}

const toggleLanguage = () => {
  showLanguagePopup.value = !showLanguagePopup.value
  if (showLanguagePopup.value) {
    showUserPopup.value = false
  }
}

const toggleUserPopup = () => {
  showUserPopup.value = !showUserPopup.value
  if (showUserPopup.value) {
    showLanguagePopup.value = false
  }
}

const selectLanguage = (lang) => {
  locale.value = lang
  localStorage.setItem('locale', lang)
  showLanguagePopup.value = false
}

const closeLanguagePopup = (event) => {
  const languageSelector = document.querySelector('.language-selector')
  const languagePopup = document.querySelector('.language-popup')
  
  if (showLanguagePopup.value && 
      languageSelector && 
      languagePopup && 
      !languageSelector.contains(event.target) && 
      !languagePopup.contains(event.target)) {
    showLanguagePopup.value = false
  }
}

const closeUserPopup = (event) => {
  const userProfile = document.querySelector('.user-profile')
  const userPopup = document.querySelector('.user-popup')
  
  if (showUserPopup.value && 
      userProfile && 
      userPopup && 
      !userProfile.contains(event.target) && 
      !userPopup.contains(event.target)) {
    showUserPopup.value = false
  }
}

const handleLogout = () => {
  logout()
  showUserPopup.value = false
  router.push('/login')
}

const navigateTo = (path) => {
  showUserPopup.value = false
  router.push(path)
}

onMounted(() => {
  document.addEventListener('click', closeLanguagePopup)
  document.addEventListener('click', closeUserPopup)
  
  // 监听登录状态变化
  window.addEventListener('storage', function(e) {
    if (e.key === 'user_token' || e.key === 'user_info') {
      // 强制重新计算计算属性
      refreshLoginStatus()
    }
  })
})
</script>

<template>
  <header class="header">
    <div class="header-content">
      <div class="logo-container">
        <router-link to="/" class="logo">
          <img src="@/assets/icons/logo.png" alt="登悦中国" class="logo-image" />
        </router-link>
      </div>

      <nav class="main-nav">
        <router-link to="/">{{ t('navigation.home') }}</router-link>
        <router-link to="/visa">{{ t('navigation.visa') }}</router-link>
        <router-link to="/payment">{{ t('navigation.payment') }}</router-link>
        <router-link to="/travel">{{ t('navigation.travel') }}</router-link>
        <router-link to="/forum">{{ t('navigation.forum') }}</router-link>
      </nav>

      <div class="header-actions">
        <div class="language-selector" @click="toggleLanguage">
          {{ locale.toUpperCase() }}
          <span class="dropdown-arrow">▼</span>
        </div>
        
        <!-- 根据登录状态显示不同的内容 -->
        <template v-if="userLoggedIn">
          <div class="user-profile" @click="toggleUserPopup">
            <div class="avatar-container">
              <i class="avatar-icon fas fa-user-circle"></i>
            </div>
            <span class="dropdown-arrow">▼</span>
          </div>
        </template>
        <template v-else>
          <router-link to="/login" class="login-button">{{ t('navigation.login') }}</router-link>
        </template>
      </div>
    </div>
  </header>

  <!-- 语言选择弹出框 -->
  <div class="language-popup" v-if="showLanguagePopup">
    <div class="language-option" @click="selectLanguage('zh')">
      {{ t('language.chinese') }}
      <span class="language-check" v-if="locale === 'zh'">✓</span>
    </div>
    <div class="language-option" @click="selectLanguage('en')">
      {{ t('language.english') }}
      <span class="language-check" v-if="locale === 'en'">✓</span>
    </div>
  </div>
  
  <!-- 用户菜单弹出框 -->
  <div class="user-popup" v-if="showUserPopup && userLoggedIn">
    <div class="user-popup-header">
      <div class="large-avatar">
        <i class="large-avatar-icon fas fa-user-circle"></i>
      </div>
      <div class="user-name">{{ userInfo?.username || '用户' }}</div>
    </div>
    <div class="user-options">
      <div class="user-option" @click="navigateTo('/profile')">
        <i class="fas fa-user"></i> 个人信息
      </div>
      <div class="user-option" @click="navigateTo('/settings')">
        <i class="fas fa-cog"></i> 设置
      </div>
      <div class="user-option logout" @click="handleLogout">
        <i class="fas fa-sign-out-alt"></i> 退出登录
      </div>
    </div>
  </div>
</template>

<style scoped>
/* 顶部导航栏样式 */
.header {
  width: 100%;
  height: 70px;
  background-color: #ffffff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  position: sticky;
  top: 0;
  z-index: 100;
}

.header-content {
  max-width: 1600px;
  height: 100%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
}

/* Logo 相关样式 */
.logo-container {
  display: flex;
  align-items: center;
  margin-left: 152px;
}

.logo {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: inherit;
  transition: transform 0.3s ease;
}

.logo:hover {
  transform: scale(1.05);
}

.logo-image {
  height: 40px;
  width: auto;
}

/* 导航菜单样式 */
.main-nav {
  display: flex;
  gap: 36px;
}

.main-nav a {
  text-decoration: none;
  color: #333;
  font-size: 1rem;
  position: relative;
  transition: color 0.3s;
}

.main-nav a:hover {
  color: #00c389;
}

.main-nav a::after {
  content: '';
  position: absolute;
  width: 0;
  height: 2px;
  bottom: -5px;
  left: 50%;
  background-color: #00c389;
  transition: all 0.3s;
  transform: translateX(-50%);
}

.main-nav a:hover::after {
  width: 100%;
}

/* 头部操作区样式 */
.header-actions {
  display: flex;
  align-items: center;
  gap: 20px;
}

/* 语言选择器样式 */
.language-selector {
  padding: 5px 10px;
  border-radius: 4px;
  background: #f5f5f5;
  cursor: pointer;
  transition: all 0.3s;
  display: flex;
  align-items: center;
  gap: 5px;
  position: relative;
}

.language-selector:hover {
  background: #e0e0e0;
}

.dropdown-arrow {
  font-size: 0.7rem;
  margin-left: 2px;
}

/* 登录按钮样式 */
.login-button {
  padding: 10px 20px;
  background-color: #ff5a5a;
  color: #fff;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s;
  text-decoration: none;
  display: inline-block;
  text-align: center;
}

.login-button:hover {
  background-color: #ff3939;
}

/* 语言选择弹出框样式 */
.language-popup {
  position: absolute;
  top: 70px;
  right: 120px;
  background: white;
  border-radius: 5px;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15);
  overflow: hidden;
  z-index: 200;
  animation: fadeIn 0.2s ease;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.language-option {
  padding: 12px 25px;
  cursor: pointer;
  transition: background 0.3s;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-width: 150px;
}

.language-option:hover {
  background: #f5f8fa;
}

.language-check {
  color: #00c389;
  font-weight: bold;
}

/* 响应式样式 */
@media (max-width: 1200px) {
  .logo-container {
    margin-left: 100px;
  }
}

@media (max-width: 992px) {
  .logo-container {
    margin-left: 60px;
  }
}

@media (max-width: 768px) {
  .header-content {
    padding: 0 15px;
  }
  .main-nav {
    gap: 20px;
  }
  .logo-container {
    margin-left: 30px;
  }
}

@media (max-width: 576px) {
  .header-content {
    justify-content: center;
  }
  .logo-container {
    display: none;
  }
  .main-nav {
    gap: 15px;
  }
  .main-nav a {
    font-size: 0.9rem;
  }
}

/* 用户头像和下拉菜单样式 */
.user-profile {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  position: relative;
  transition: all 0.3s ease;
}

.user-profile:hover .avatar-container {
  transform: scale(1.05);
  box-shadow: 0 0 10px rgba(0, 195, 137, 0.2);
}

.avatar-container {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: #f0f0f0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.avatar-icon {
  font-size: 24px;
  color: #888888;
  transition: transform 0.3s ease;
}

.user-profile:hover .avatar-icon {
  transform: rotate(5deg);
}

.user-name {
  font-size: 0.9rem;
  color: #333;
}

.user-popup {
  position: absolute;
  top: 70px;
  right: 0;
  width: 280px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  padding: 20px;
  z-index: 100;
  animation: popIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
  transform-origin: top right;
}

@keyframes popIn {
  from {
    opacity: 0;
    transform: scale(0.9) translateY(-10px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.user-popup-header {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
  padding-bottom: 15px;
  border-bottom: 1px solid #eee;
}

.large-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-color: #f0f0f0;
  margin-right: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.large-avatar-icon {
  font-size: 36px;
  color: #888888;
}

.user-options {
  padding: 10px 0;
}

.user-option {
  display: flex;
  align-items: center;
  padding: 12px 20px;
  color: #555;
  font-size: 0.95rem;
  transition: all 0.3s ease;
  text-decoration: none;
  gap: 10px;
  border-radius: 6px;
  margin-bottom: 4px;
  animation: fadeInRight 0.5s ease forwards;
  opacity: 0;
  transform: translateX(-10px);
}

.user-option:nth-child(1) {
  animation-delay: 0.1s;
}

.user-option:nth-child(2) {
  animation-delay: 0.2s;
}

.user-option:nth-child(3) {
  animation-delay: 0.3s;
}

.user-option:nth-child(4) {
  animation-delay: 0.4s;
}

@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translateX(-10px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.user-option:hover {
  background-color: #f5f8fa;
  color: #00c389;
  transform: translateY(-2px);
}

.user-option i {
  transition: transform 0.3s ease;
}

.user-option:hover i {
  transform: scale(1.2);
}

.user-option.logout {
  color: #ff5a5a;
  cursor: pointer;
}

.user-option.logout:hover {
  background-color: #fff8f8;
  color: #ff3939;
}
</style> 